<template>
    <aside class="page__aside">
        <!-- 本页导航 -->
        <header class="aside__hd">
            <div class="hd__icon">
                <i class="iconfont" :class="props.icon"></i>
            </div>
            <div class="hd__title">
                {{ props.title }}
            </div>
            <div class="hd__desc">
                {{ props.desc }}
            </div>
        </header>
        <!-- 用户交互区 -->
        <section class="aside__interact">
            <slot name="interact">
            </slot>
        </section>
        <footer class="aside__ft">
            <div class="ft__home-btn" @click="backHome">
                <el-icon>
                    <HomeFilled />
                </el-icon>
                返回首页
            </div>
        </footer>
    </aside>
</template>

<script setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
    icon: String,
    title: String,
    desc: String
})
const router = useRouter();

const backHome = () => {
    router.push('/home');
}
</script>

<style lang="scss" scoped>
$aside-bg: #E95258;
$home-btn-bg: darken($aside-bg, 30%);

.page__aside {
    height: 100%;
    width: 30vw;
    background-color: $aside-bg;
    border-right: 1px solid #ebeef5;
    position: relative;
    .aside__hd {
        padding: 40px;
        .hd__icon {
            margin-bottom: 20px;
            i {
                font-size: 4rem;
                color: #fff;
            }
        }
        .hd__title {
            font-size: 3rem;
            font-weight: bold;
            color: #fff;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .hd__desc {
            margin-top: 20px;
            font-size: 1.25rem;
            line-height: 1.25;
            color: #fff;
        }
    }

    .aside__interact {
        padding: 0 40px;
    }

    .aside__ft {
        // 置于底部
        position: absolute;
        bottom: 0;
        width: 100%;

        .ft__home-btn {
            width: 100%;
            height: 10vh;
            font-size: 1.5rem;
            font-weight: bold;
            background: $home-btn-bg;
            color: #fff;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;

            .el-icon {
                margin-right: 0.5rem;
            }

            &:hover {
                background: darken($home-btn-bg, 10%);
            }
        }
    }
}
</style>